<template>
    <el-dialog title="编 辑" :visible.sync="thisUpdatePage" :before-close="handleClose">
        <el-form ref="categoryFrom" :model="categoryFrom" label-width="135px" :rules="rules">
        <el-form-item label="分类名称"  prop="categoryName">
            <el-input  v-model="categoryFrom.categoryName" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="分类编码"  prop="categoryCode">
            <el-input  v-model="categoryFrom.categoryCode" readonly="readonly" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="排序号" prop="sort">
            <el-input type="sort" v-model.number="categoryFrom.sort" autocomplete="off" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="是否启用"  prop="isEnable">
            <el-radio v-model="categoryFrom.isEnable" label="0">否</el-radio>
            <el-radio v-model="categoryFrom.isEnable" label="1">是</el-radio>
        </el-form-item>
        <el-form-item label="类型" prop="categoryType">
            <el-select v-model="categoryFrom.categoryType" placeholder="请选择类型" style="width: 80%;">
                  <el-option label="主食" :value="1"></el-option>
                  <el-option label="加菜" :value="2"></el-option>
                  <el-option label="饮料/自选/餐盒/补差" :value="3"></el-option>
                  <el-option label="套餐" :value="4"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="上级分类" prop="parentId">
            <el-select v-model="categoryFrom.parentId" placeholder="请选择上级分类" style="width: 80%;">
                <el-option label="无" :value="0"></el-option>
								<el-option v-for=" (item,key) of categoryList" :key="key" :value="item.id" :label="item.categoryName"></el-option>
						</el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="categoryFrom.remark" style="width:80%" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('categoryFrom')">保存</el-button>
            <el-button @click="closeUpdateChange">取 消</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import { find, save, findAllFirstList } from '@api/restaurant/merchant/productCategory'
export default {
  data () {
    return {
      thisUpdatePage: this.updatePage,
      updateId: this.uId,
      categoryFrom: {
        id: '',
        categoryName: '',
        sort: '',
        isEnable: '0',
        categoryType: '',
        parentId: '',
        remark: ''
      },
      categoryList: [],
      rules: {
        categoryName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        categoryType: [
          { required: true, message: '请选择分类类型', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请输入排序号', trigger: 'blur' }
        ],
        categoryType: [
          { required: true, message: '请选择分类类型', trigger: 'change' }
        ],
        remark: [
          { min: 1, max: 20, message: '长度在 1 到 128 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  /** 双向绑定 start */
  props: ['updatePage', 'uId'],
  watch: {
    updatePage (val) {
      this.thisUpdatePage = val// ②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
    },
    thisUpdatePage (val) {
      this.$emit('on-updatePage-change', val)// ③组件内对myResult变更后向外部发送事件通知
    },
    uId (val) {
      this.updateId = val// ②监听外部对props属性uShow的变更，并同步到组件内的data属性udpateShow中
      this.loadCategory(val)
    },
    updateId (val) {
      this.$emit('on-id-change', val)// ③组件内对udpateShow变更后向外部发送事件通知
    }
  },
  /** 双向绑定 end */
  methods: {
    closeUpdateChange () {
      this.thisUpdatePage = !this.thisUpdatePage
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          save(this.categoryFrom).then(res => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.$emit('on-loadlist-change')// ③组件内对myResult变更后向外部发送事件通知
            this.loading = false
            this.closeUpdateChange()
          }).catch(err => {
            console.log('err', err)
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose (done) {
      this.$confirm('确定关闭吗？').then(() => {
        done()
      }).catch(() => {

      })
    },
    loadCategory (id) {
      this.loading = true
      find({
        id: id
      }).then(res => {
        this.categoryFrom = res.data
        this.categoryFrom.isEnable = res.data.isEnable + ''
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    getAllFirstList () {
      this.loading = true
      findAllFirstList({

      }).then(res => {
        this.categoryList = res.data
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    }
  },
  mounted () {
    this.getAllFirstList()
  }
}
</script>
